<template>
  <el-dialog :visible.sync="open" @close="close" :title="title" width="800px" append-to-body destory-on-close>
    <el-form ref="elForm" :model="formData" size="small" label-width="100px" label-position="left">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="执行人" prop="dept">
            <span :style="{ marginRight: '15px' }" v-if="formData.userId != 0">{{ userName }}</span>
            <el-button type="primary" size="mini" @click="handlePickRole">选择执行人</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="任务内容" prop="location">
            <el-input type="textarea" v-model="formData.taskContent" placeholder="请输入任务内容" :style="{ width: '100%' }"
              :rows="5">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="辅助信息" prop="location">
            <el-input type="textarea" v-model="formData.helpContent" placeholder="请输入辅助信息" :style="{ width: '100%' }"
              :rows="5">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="执行顺序" prop="location">
            <el-row>
              <el-input type="number" v-model="formData.sort" placeholder="请输入执行顺序" :style="{ width: '100%' }">
              </el-input>
            </el-row>
            <el-row :style="{ fontSize: '12px' }">
              请输入顺序数字，任务按数字从小到大依次执行。相同数字为并行任务，为同时执行
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="任务附件" prop="location">
            <uploader :files="attachList" @uploading="onUploaded" @onDownload="handleTaskAttachDownload"
              @onRemove="handleTaskAttachDel" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15" v-if="needMsg">
        <el-col :span="24">
          <el-form-item label="转发消息" prop="dept">
            <el-button type="primary" size="mini" @click="handleSysMessagePick">选择我的消息</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15" v-if="messageId > 0">
        <el-col :span="24">
          <el-form-item label="" prop="dept">
            转发消息内容：{{ messageContent }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
    <drill-role-picker ref="drillRolePicker" @handleOk="onRoleSelected" />
    <staff-choose-dialog ref="staffChoose" :muilt="false" @Unitpersonnel="onStaffChoose" />
    <message-picker ref="messagePicker" @handleOk="onMessageSelected" />
  </el-dialog>
</template>
<script>
import dialogMixin from '../../../mixins/dialogMixin'
import DrillRolePicker from '@/views/components/drillRolePicker/index.vue';
import StaffChooseDialog from '@/views/components/staffChooseDialog/index';
import MessagePicker from '@/views/mytask/components/MessagePicker.vue';
import Uploader from '@/views/components/uploader/index.vue';

export default {
  name: 'TaskEditDialog',
  mixins: [dialogMixin],
  components: { DrillRolePicker, StaffChooseDialog, MessagePicker, Uploader },
  props: {
    taskType: {
      type: String,
      default: 'drill'
    },
    needMsg: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formData: {
        userId: 0,
        groupId: 0,
        taskContent: '',
        helpContent: '',
        sort: 0
      },
      userName: '',
      title: '',
      messageId: 0,
      messageContent: '',
      attachList: []
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {

  },
  methods: {
    add() {
      this.formData = {
        taskId: 0,
        userId: 0,
        groupId: 0,
        taskContent: '',
        helpContent: '',
        sort: 0
      };
      this.userName = '';
      this.messageId = 0;
      this.messageContent = '';
      this.attachList = [];
      this.title = this.taskType == 'drill' ? '新增演练任务' : '新增处置任务';
      this.open = true;
    },
    edit(data) {
      this.handleId = data.handleId;
      this.formData = Object.assign({}, data);
      this.userName = data.userName;
      this.messageId = 0;
      this.messageContent = '';
      this.attachList = data.taskAttaches;
      this.title = this.taskType == 'drill' ? '修改演练任务' : '修改处置任务';
      this.open = true;
    },
    handleConfirm() {
      if (this.formData.taskContent == '') {
        this.$modal.msgError('请填写任务内容');
        return false;
      }
      if (this.formData.userId == 0) {
        this.$modal.msgError('请选择执行人');
        return false;
      }
      this.formData.messageId = this.messageId;
      let ids = [];
      this.attachList.forEach(a => {
        if (a.attachid != undefined) {
          ids.push(a.attachid);
        } else {
          ids.push(a.attachId);
        }
      })
      this.formData.hdTaskAttachIds = ids.join(',');
      this.$emit('handleOk', this.formData);
      this.open = false;
    },
    handlePickRole() {
      if (this.taskType == 'drill') {
        this.$refs.drillRolePicker.showDialog();
      } else {
        this.$refs.staffChoose.showDialog('选择任务执行人');
      }
    },
    onRoleSelected(data) {
      this.formData.userId = data.roleId;
      this.formData.groupId = data.groupId;
      this.userName = data.roleName;
    },
    onStaffChoose(deptId, userId, user, dept) {
      console.log(deptId, userId, user, dept)
      this.formData.userId = userId;
      this.formData.groupId = deptId;
      this.userName = user.nickName;
    },
    handleSysMessagePick() {
      this.$refs.messagePicker.showDialog();
    },
    onMessageSelected(data) {
      // 选择了消息
      this.messageId = data.messageId;
      this.messageContent = data.message;
    },
    onUploaded(data) {
      // 上传文件
      this.attachList.push(data);
    },
    handleTaskAttachDel(data) {
      // 根据attachId删除任务附件
      let index = this.attachList.findIndex(val => val.id == data.id);
      const TaskAttachApi = require('@/api/response/TaskAttach');
      TaskAttachApi.delTaskAttach(data.id).then(res => {
        this.attachList.splice(index, 1);
      })
    },
    handleTaskAttachDownload(row) {
      // 下载附件
      this.download(
        `com/ComAttach/download/${row.attachid}`,
        {},
        `${row.attachname}.${row.attachtype}`
      );
    }
  }
}

</script>
<style>

</style>
